<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户浏览柱状图</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/echarts.js"></script>
    <style>
        .box {
            width: 1000px;
            height: 600px;
        }
    </style>
</head>
<body>

<hr/>
<div class="box"></div>
<script src="js/axios.js"></script>
<script src="js/qs.js"></script>
<script>
    // 获取box元素
    var box = document.getElementsByClassName("box")[0];

        // 定义三个数组
        gno = [];
        gname = [];
        times = [];
        // 获取后台返回的JSON数据
        axios.get("HistoryVO?op=getAllHistory").then(rs=>{
            console.log(rs.data)
            for (var i = 0; i < rs.data.length; i++) {
                gno.push(rs.data[i].gno);
                gname.push(rs.data[i].gname);
                times.push(rs.data[i].times);
                console.log(rs.data[i].gno);
                console.log(rs.data[i].gname);
                console.log(rs.data[i].times);
            }
            // 1. 初始化ECharts
            var my_box = echarts.init(box);

            // 2. 进行参数配置
            var option = {
                // 标题
                title: {
                    text: "用户浏览商品柱状图",
                    x: "center",
                    y: "top",
                    textAlign: "left",
                    textStyle: {
                        fontFamily: "楷体",
                        fontSize: 35,
                        textStyle: "bold"
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}  :  {c}'
                },
                // 图例
                legend: {
                    left: "right",
                    orient: "vertical"
                },

                // x轴数据
                xAxis: {
                    data: gname,
                    axisLabel: {
                        show: true, // 是否显示刻度标签，默认显示
                        interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
                        rotate: -90, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
                        inside: false, // 刻度标签是否朝内，默认朝外
                        margin: 6, // 刻度标签与轴线之间的距离
                        // formatter: '{value} Day' , // 刻度标签的内容格式器
                    },
                },

                // y轴数据
                yAxis: {},

                // 数据信息
                series: [
                    {
                        name: "浏览次数",
                        type: "bar",
                        data: times,
                        itemStyle: {
                            normal: {
                                color: '#01b4b4'
                            }
                        }
                    },
                ]
            }
            var intervalId = null;  // 定时器的ID
            var currentIndex = 0;   // 当前轮播的索引

        // 定义轮播函数
            function carousel() {
                var dataLen = option.series[0].data.length;

                // 取消之前高亮的图形
                my_box.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });

                currentIndex = (currentIndex + 1) % dataLen;

                // 高亮当前图形
                my_box.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });

                // 显示 tooltip
                my_box.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });
            }

        // 开始轮播
            function startCarousel() {
                intervalId = setInterval(carousel, 1000);
            }

        // 停止轮播
            function stopCarousel() {
                clearInterval(intervalId);
            }

        // 监听鼠标移入事件，停止轮播
            my_box.on('mouseover', function() {
                stopCarousel();
            });

        // 监听鼠标移出事件，继续轮播
            my_box.on('mouseout', function() {
                startCarousel();
            });

        // 初始化时启动轮播
            startCarousel();
            // 3. 可视化呈现
            my_box.setOption(option);
        })

        // my_box.on('click', function(params) {
        //     window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
        // });


</script>
</body>
</html>
